.header {
        		text-align: center;
        	}
			.body {
        		width: 800px;
   	 			margin: 0 auto;
   	 			border: 1px solid #ddd;
   	 			position: relative;
        	}
        	.content-header {
       		    position: relative;
	        	color: #333;
			    background-color: #f5f5f5;
			    padding: 14px 15px;
			    border-bottom: 1px solid #ddd;
			    border-top-left-radius: 3px;
			    border-top-right-radius: 3px;
			    text-align:center;
		    }
		    .content-header .userlistImage {
			    display: inline-block;
		        position: absolute;
			    left: 10px;
			    top: 6px;
			    width: 40px;
			    height: 40px;
        	    background: url(../img/userlist.png) no-repeat 0px 0px; 
			    background-size: contain;
		    }
		    .content-body {
		    	overflow: auto;
		    	padding: 12px 12px;
		    }
		    .content-footer {
		    	height: 50px;
		    	line-height: 50px;
		    	text-align: right;
		    	border-top: 1px solid #ddd;
		    }
		    .content-footer input {
		    	float:right;
		    	display: block;
			    height: 34px;
			    font-size: 18px;
			    line-height: 1.42857;
			    color: rgb(85, 85, 85);
			    background-color: rgb(255, 255, 255);
			    background-image: none;
			    box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset;
			    padding: 6px 12px;
			    border-width: 1px;
			    border-style: solid;
			    border-color: rgb(204, 204, 204);
			    border-image: initial;
			    border-radius: 4px;
			    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		    }
		    .content-footer input.content{
		    	width: 77%;
		    }
		    .content-footer input.url{
		    	width: 88%;
		    }
		    .btn{
		    	float:right;
			    display: block;
			    padding: 5px 12px;
			    margin-bottom: 0;
			    font-size: 14px;
			    font-weight: 400;
			    line-height: 1.42857143;
			    text-align: center;
			    white-space: nowrap;
			    vertical-align: middle;
			    -ms-touch-action: manipulation;
			    touch-action: manipulation;
			    cursor: pointer;
			    -webkit-user-select: none;
			    -moz-user-select: none;
			    -ms-user-select: none;
			    user-select: none;
			    background-image: none;
			    border: 1px solid transparent;
			    border-radius: 4px;
		    }
		    .btn-info{
		    	background-color: #00c0ef;
    			border-color: #00acd6;
		    }
		    .btn-primary {
			    color: #fff;
			    background-color: #337ab7;
			    border-color: #2e6da4;
			}
			.btn-danger {
			    background-color: #dd4b39;
			    border-color: #d73925;
			}
			.btn-success {
			    background-color: #6dd491;
			    border-color: #008d4c;
			}
		    .btn-default {
			    background-color: #f4f4f4;
			    color: #444;
			    border-color: #ddd;
			}
		    .send{
		    	margin-top: 10px;
		    }
		    .connect{
		    	margin-top: 10px;
		    }
		    .msg-item{
		    	clear: both;
    			margin: 5px 0px;
		    }
		    .msg-item .content{
		    	display: inline-block;
	    	    max-width: 476px;
			    padding: 4px 20px;
			    margin-top: 7px;
			    word-wrap: break-word;
			    background-color: #f1f1f1;
			    border: 1px solid #d6caca;
			    border-radius: 10px;
		    }
		    .msg-item .time{
	    	    font-size: 12px;
	    	    color: #c1baba;
	    	    margin-left: 10px;
    	        margin-right: 10px;
		    }
		    .msg-item .name{
	    	    color: #142fff;
		    }
		    .footer {
		    	width: 800px;
		    	height: 50px;
		    	line-height: 50px;
   	 			margin: 0 auto;
   	 			text-align: center;
		    }
		    #connect {
	    	    margin-left: 1%;
    			margin-right: 1%;
		    }
		    #disconnect {
	    	    margin-left: 1%;
    			margin-right: 1%;
		    }
		    #send {
    	        margin-left: 1%;
		    }
		    .login-item{
		    	clear: both;
		    	text-align:center;
		    	margin-top: 10px;
    			margin-bottom: 10px;
		    }
		    .login-tip{
		    	font-size: 13px;
			    padding: 2px 10px;
			    border-radius: 100px;
			    background-color: #f5f5f5;
			    display: inline-block;
		    }
		    .userlist{
		    	display: none;
		    	width: 25%;
    			background-color: #fff;
    			border-right:1px solid #ddd;
 			    position: absolute;
    			z-index: 999;
		    }
		    .userlist .userNum{
	    	    display: inline-block;
			    color: #fff;
			    background-color: #37cc12;
			    height: 20px;
			    width: 20px;
			    line-height: 20px;
			    border-radius: 19px;
			    margin-left: 5px;
			    font-size: 13px;
	    	    font-weight: bold;
		    }
		    .userlist ul{
			    /* width: 180px; */ /* 宽度根据元素内容调整 */
			    list-style:none; /* 去掉ul前面的符号 */
			    margin: 0px; /* 与外界元素的距离为0 */
			    padding: 0px; /* 与内部元素的距离为0 */
			    overflow-y: auto;
			}
			.userlist div{
			    height: 50px;
   				line-height: 50px;
   				text-align: center;
   				border-bottom: 1px solid #ddd;
    			background-color: #029fd4;		
			}
			.userlist ul li{
		        background-color: #f5f5f5;
			    border-bottom: 1px solid #fff;
			    padding: 10px 0px;
			    display: block;
			    line-height: 1.35em;
			    text-decoration: none;
			    white-space: nowrap;
			    text-align: center;
			    cursor: pointer;
			}
			.userlist ul li span{
		        display: inline-block;
			    color: #fff;
			    background-color: #ffa500;
			    height: 17px;
			    width: 17px;
			    line-height: 17px;
			    border-radius: 19px;
			    margin-left: 5px;
			    font-size: 13px;
	    	    font-weight: bold;
	    	    vertical-align: middle;
			}
			.userlist ul li:hover{
			    background-color: #fbfafa; 
	  			color: #465c71; 
	  			text-decoration: none; 
			}
			.userlist ul li.active{
			    background-color: #ffa500; 
	  			color: #465c71; 
	  			text-decoration: none; 
			}
			.input-group-addon {
			    padding: 6px 12px;
			    font-size: 14px;
			    font-weight: normal;
			    line-height: 1;
			    color: #555;
			    text-align: center;
			    background-color: #eee;
			    border: 1px solid #ccc;
			    border-radius: 4px;
			}
		    .msg_windows_title span{
		    	color: #ffa500;
		    }
		    
		    /* 手机端 */
			@media (max-width: 768px) {
				.body {
	        		width: 100%;
	   	 			margin: 0 auto;
	   	 			border: 1px solid #ddd;
	        	}
	        	
	        	.footer {
			    	width: 100%;
	   	 			margin: 15px auto;
	   	 			text-align: center;
			    }
	        	
	        	input.url {
				    width: 75%;
				}
				
				input.content {
				    width: 57%;
				}
				.msg-item .content{
	    	    	display: inline-block;
	    	    	max-width: 70%;
				    padding: 4px 20px;
				    margin-top: 7px;
				    word-wrap: break-word;
				    background-color: #f1f1f1;
				    border: 1px solid #d6caca;
				    border-radius: 10px;
	    	    }
				.userlist{
			    	display: none;
			    	width: 45%;
	    			background-color: #fff;
	    			border-right:1px solid #ddd;
	 			    position: absolute;
	    			z-index: 999;
			    }
			}